<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>{% block title %}{% endblock %}</title>
    <meta name="description" content="快乐云-idc-主机-云主机-云虚拟主机-网站空间 7x24小时云服务" />
    <meta name="keywords" content="快乐云-idc-主机-云主机-云虚拟主机-网站空间" />
    <meta name="author" content="快乐云-idc-主机-云主机-云虚拟主机-网站空间" />
    <!-- font awesome link  -->
    <link rel="stylesheet" href="./static/css/all.min.css">
    <link href="./static/css/ta.css" rel="stylesheet">
    <!-- custom css file link  -->
    <link rel="stylesheet" href="./static/css/style.css">
    <link rel="icon" href="./static/favicon.ico" type="image/x-icon"/>
  </head>
  <body>
    <!-- header section starts  -->
    <header class="header">
      <a href="/" class="logo gradient_text">
          <i class="fas fa-plane-departure"></i>
          <span class="gradient_text">快乐云&trade;</span>
      </a>
      <nav class="navbar">
          <a href="/">首页</a>
          <a href="/#pricing">价格</a>
          <a href="/#idc">节点</a>
          {% if isLogin %}
          <a href="/order/{{ username }}" class="btn gradient"><i class="fas fa-user"></i>{{ username }}</a>
          <a href="/order/{{ username }}" class="btn gradient"><i class="fas fa-yen-sign"></i>{{ userbalance }}</a>
          <a href="/logout" class="btn gradient"><i class="fas fa-user-minus"></i>注销</a>
          {% else %}
          <a href="/login" class="btn gradient"><i class="fas fa-user-plus"></i>未登录</a>
          {% endif %}
      </nav>
      <div id="menu-btn" class="fas fa-bars"></div>
    </header>
    <!-- header section ends -->

    {% block body %}{% endblock %}

    <!--Footer-->
    {% block footer %}
    <!-- footer section starts  -->
    <section class="footer">
      <div class="credit">created By <i class="fas fa-copyright"></i> <span class="gradient_text">快乐云<i class="fas fa-trademark"></i></span></div>
    </section>
    <!-- footer section ends -->
    {% endblock %}

    <!-- Script -->
    {% block script %}
    <script>
      let menu = document.querySelector('#menu-btn');
      let navbar = document.querySelector('.navbar');

      menu.onclick = () =>{
          menu.classList.toggle('fa-times');
          navbar.classList.toggle('active');
      } 

      window.onscroll = () =>{
          menu.classList.remove('fa-times');
          navbar.classList.remove('active');
      }
    </script>
    
    <script src="https://cdn.dingxiang-inc.com/ctu-group/captcha-ui/index.js" crossorigin="anonymous" id="dx-captcha-script"></script>
    <script>
    var myCaptcha = _dx.Captcha(document.getElementById('verify'), {
        appId: 'ca4b8d957184d6e6d6e19e42600492f8',
        apiServer: 'https://cap.dingxiang-inc.com',
        // style: 'inline',
        // inlineFloatPosition: 'down',
        // style: 'popup',
        customLanguage: {
            init_inform: '拖动一下', // <-- 初始化时的提示文案
            slide_inform: '<span style="color:#f00;">滑动</span>补全缺口&nbsp;<span class="gradient_text">by 快乐云&trade;</span>',
            pass_by_server: '<span class="gradient_text">快乐云&trade无感验证成功span>'
        },
        success: function (token) {
            console.log('token:', token);
            document.getElementsByName('token')[0].value = token;
        }
      })
    </script>
    {% endblock %}
  </body>
</html>